/* Виджет - поиск по урокам тренинга */
:root {
  --search-font: Montserrat, sans-serif;
  
  --search_border: #AAC4C980;
  --search_bg: #AAC4C920;
  
  --search_title_size: clamp(16px, 4vw, 20px);
  --search_title_color: #6B929A;
  
  --search_input_bg: #fff;
  
  --search_btn_font_size: 14px;
  --search_btn_color: #fff;
  --search_btn_bg: #6B929A;
  --search_btn_bg_hover: #AAC4C9;
  
  --search_result_shadow: rgba(0, 0, 0, .05);
  --search_result_border: #f1f1f1;
  --search_result_bg: #fff;
  
  --search_result_item_color: #222;
  --search_result_item_border: #ececec;
  --search_result_item_hover_color: #fff;
  --search_result_item_hover_bg: #6B929A;
}

.search__block {
    padding: 24px;
    background: var(--search_bg);
    border: 1px solid var(--search_border);
    border-radius: 10px;
}

.search__title {
    margin-bottom: 10px;
    font-family: var(--search-font);
    font-style: normal;
    font-weight: 400;
    font-size: var(--search_title_size);
    color: var(--search_title_color);
}

.search__form {
    margin-bottom: 12px;
}

.search__form input {
    padding: 12px 8px;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 5px;
    background: var(--search_input_bg)
}

.search__button {
    padding: 4px 12px;
    
    font-family: var(--search-font);
    font-weight: 400;
    font-size: var(--search_btn_font_size);
    color: var(--search_btn_color);
    
    border: none;
    border-radius: 5px;
    background: var(--search_btn_bg);
    
    transition: all .3s;
}

.search__button:hover {
    background: var(--search_btn_bg_hover);
}

.search__result {  
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translatey(100%) translatex(-50%);
    z-index: 9999;
    
    padding: 16px;   
    max-height: 300px;
    width: calc(100% - 72px) !important;
    
    box-shadow: 0 0 10px 0 var(--search_result_shadow);
    border: 1px solid var(--search_result_border);
    border-radius: 10px;
    background: var(--search_result_bg);
    
    overflow: auto;
}

.search__result .result-item {
    margin-bottom: 4px;
}

.search__result .result-item a {
    display: block;
    padding: 4px 8px;
    font-family: var(--search-font);
    color: var(--search_result_item_color) !important;
    border: 1px solid var(--search_result_item_border);
    border-radius: 5px;
    
    transition: all .3s;
}

.search__result .result-item a:hover {
    text-decoration: none;
    color: var(--search_result_item_hover_color) !important;
    background: var(--search_result_item_hover_bg);
}